<template>
	<view class="tab-container bg-white margin-top">
		
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="active==0?'text-green cur':''" @tap="tabSelect(0)">
					未缴费账单
				</view>
				<view class="cu-item flex-sub" :class="active==1?'text-green cur':''" @tap="tabSelect(1)">
					已缴费账单
				</view>
			</view>
		</scroll-view>
		
		<view class="cu-list menu" v-if="active == 0">
			<view class="cu-item arrow" v-if="bills.length > 0" v-for="(item, key) in bills" :key="key" :data-item="item"
				@click="myHouseDetail(item)">
				<view class="content padding-tb-sm">
					<view class="text-black text-sm">
						<text class="cuIcon-right margin-right-xs">账单类型</text> {{item.billsType}}
					</view>
					<view class="text-black text-sm">
						<text class="cuIcon-right margin-right-xs">缴费人姓名</text> {{item.householderName}}
					</view>
					<view class="text-black text-sm flex justify-between">
						<text class="cuIcon-right margin-right-xs">账单金额</text>
						<view class="text-black text-lg">{{item.billsAmount}} 元</view>
					</view>
					<view class="text-black text-sm">
						<text class="cuIcon-right margin-right-xs">房屋编号</text> {{item.houseNum}}
					</view>
					<view class="text-black text-sm">
						<text class="cuIcon-right margin-right-xs">租户类型</text> {{item.tenantType}}
					</view>
					
				</view>
			</view>

			<view class="cu-item" v-if="bills.length === 0">
				<view class="content">
					<text class="cuIcon-warn text-green"></text>
					<text class="text-grey">暂无账单信息</text>
				</view>
			</view>
		</view>
		
		<view class="" v-else>
			<view class="content">
				<text class="cuIcon-warn text-green"></text>
				<text class="text-grey">暂无账单记录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import context from '../../lib/java110/Java110Context.js';
	export default {
		data() {
			return {
				bills: "",
				owners:"",
				active: 0,
			};
		},
		onLoad(options) {
			this.owners = context.getUserInfo();
			this.bills = this.owners[0].bills
			console.log("业主账单信息",this.bills)
		},
		methods:{
			// onChange: function(e) {
			
			// 	this._loadCompaint(e.detail.index);
			// },
			myHouseDetail(_item){
				uni.navigateTo({
					url:"./billsDetails?billsDetails=" + JSON.stringify(_item)
				})
			},
			tabSelect: function(_active) {
				this.active = _active;
				// this._loadCompaint(_active);
				this.noData = false;
			},
		},
	}
</script>

<style scoped lang="scss">
	@import "@/pages/my/myHouse.css";
	.margin-top{
		margin-top: 0rpx;
	}

	.cu-list {
		width: 100%;
		overflow: auto;
		background-color: white;
		height: calc(100vh - 120rpx);

		.cu-item {
			background-color: #F5F5F5;
			margin: 20rpx 20rpx;
			border-radius: 30rpx;
		}
	}
</style>
